<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送消息</title>
    <!-- 引入样式-->
    <link href="../imgs/2.jpeg" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <!-- 引入js-->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/http.js"></script>
    <script src="../js/element-ui/index.js"></script>
    <style>
        body{
            background: #f2f6fc;
        }
        .el-input{
            width: 250px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="float: right;margin-top: 10px">
        <el-button type="primary" @click="openDialog()">添加</el-button>
        <el-button type="primary" @click="init()">刷新</el-button>
    </div>

    <el-table :data="msgs" style="margin-top: 10px">
        <el-table-column prop="sender" label="发送者"></el-table-column>
        <el-table-column prop="message" label="消息"></el-table-column>
        <el-table-column prop="time" label="发送时间"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="danger"size="mini" @click="deleteMsg(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table-column>
    </el-table>

    <el-pagination
            align="center" style="margin-top: 10px"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.page"
            :page-size="pagination.pageSize"
            layout="total,prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog title="发送消息" :visible.sync="dialogVisible" width="30%">
        <el-form>
            <el-form-item label="收件人">
                <el-input v-model="msg.receiver" placeholder="请输入接收用户的昵称"></el-input>
            </el-form-item>
            <el-form-item label="消息体">
                <el-input v-model="msg.message" placeholder="请输入消息"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add()" style="float: right;margin-top: 10px">发送</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    let vue=new Vue({
        el:"#app",
        data:{
            msgs:[],
            msg:{},
            pagination:{page:1,pageSize:5,total:0},
            dialogVisible:false,
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                http.get("/msg/"+this.pagination.page+"/"+this.pagination.pageSize).then(res=>{
                    this.msgs=res.data.msgs;
                    this.pagination.total=res.data.total;
                })
            },
            add(){
                http.post("/msg",this.msg).then(res=>{
                    this.$message.success("发送消息成功");
                    this.init();
                })
                this.dialogVisible=false;
            },
            deleteMsg(id){
                http.delete("/msg/"+id).then(res=>{
                    this.$message.success("删除消息成功");
                    this.init();
                })
            },
            handleCurrentChange(currentPage){
                this.pagination.page=currentPage;
                this.init();
            },
            openDialog(){
                this.msg={};
                this.dialogVisible=true;
            }
        }
    });
</script>
</body>
</html>